<template>
  <div class="pay-page">
    <div class="number">{{info.seat_num}}桌</div>
    <div class="price">￥{{info.total_amount | warpPrice}}</div>
    <div class="shop-list-box">
      <div class="order-text">订单详情</div>
      <div class="order-info">
        <div class="top">
          <div class="order-info-number">桌号 {{info.seat_num}}</div>
          <div class="people">人数 {{info.person_num}}</div>
          <div class="time">下单时间 {{orderTime}}</div>
        </div>
        <!-- <div class="bottom">
          备注：无
        </div> -->
      </div>
      <!-- 茶位 -->
      <div class="shop">
        <div class="shop-count">
          <div class="type">菜品</div>
          <div class="count-quantity">{{info.total_num}}份</div>
        </div>
        <!-- <div class="shop-botom">
          <div class="shop-left">
            <div class="text">茶位</div>
            <div class="price">￥12</div>
          </div>
          <div class="quantity">2份</div>
        </div> -->
        <div class="shop-botom" v-for="(item,index) in shopList" :key="index">
          <div class="shop-left">
            <div class="text">{{item.goods_name}}</div>
            <div style="font-size:12px;color:#666;text-align:left">{{item.goods_spu_name}}</div>
            <div class="price">￥{{item.unit_price}}</div>
          </div>
          <div class="quantity">{{item.num}}份</div>
        </div>  
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom-btn">
      <router-link tag="div" to="/home" class="continue">继续点餐</router-link>
      <div class="pay">{{info.total_amount | warpPrice}}元 立即支付</div>
    </div>
    <!-- 已下单的菜 -->
    <router-link tag="div" to="/order" class="go-back">
      已下单的菜
    </router-link>
    <!-- <div class="mask-img"></div>
    <div class="mask"></div> -->
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data(){
    return {
      orderDetail:[],
      orderTime:'',
      info: '',
      shopList: []
    }
  },
  filters:{
    warpPrice(value){
      if(value){
        return value.toFixed(2)
      }
    }
  },
  computed: {
    
  },
  watch:{
    orderDetail(){
      this.orderTime = this.orderDetail.created_at.split(' ')[1];
    }
  },
  mounted(){
    this.getOrderDetail();
  },
  methods:{
    //获取订单详情
    async getOrderDetail(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        order_num:this.$currency.getCookie('orderNum')
      }
      let res = await this.$api.getOrderDetail(params);
      Toast.clear();
      if(res.level == "success"){
        this.orderDetail = res.data[res.data.length - 1];
        res.data.forEach((item,index)=>{
          this.shopList = this.shopList.concat(item.order_item);
        })
        this.info = res.info;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
  }
}
</script>
<style lang='scss' scoped>
  .pay-page{
    min-height: 100vh;
    padding: 18px;
    padding-bottom: 120px;
    background-color: #f1f1f1;
    .number{
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 32px;
    }
    .price{
      color: #cd381f;
      text-align: center;
      font-size: 40px;
      margin-bottom: 10px;
    }
    .shop-list-box{
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .order-text{
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 32px;
        border-bottom: 1px #ccc solid;
      }
      .order-info{
        border-bottom: 1px #ccc solid;
        padding: 30px 0;
        .top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #aaa;
          font-size: 12px;
          padding: 10px 0;
          position: relative;
          .people{
            position: absolute;
            left: 50%;
            width: 140px;
            margin-left: -70px;
            text-align: center;
          }
        }
        .bottom{
          text-align: left;
          color: #aaa;
          font-size: 12px;
          padding: 10px 0;
        }
      }
      .shop{
        background-color: #fff;
        border-radius: 4px;
        .shop-count{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          line-height: 60px;
          padding: 10px 0;
          font-size: 32px;
          border-bottom: 1px #ccc solid;
        }
        .shop-botom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 0;
          border-bottom: 1px #ccc solid;
          .text{
            font-size: 28px;
            line-height: 50px;
            width: 450px;
            text-align: left;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .price{
            color: #d94445;
            font-size: 26px;
            text-align: left;
            margin-top: 10px;
          }
          .quantity{
            font-size: 26px;
          }
        }
      }
    }
    .bottom-btn{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-size: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      .continue{
        flex: 1;
        background-color: #333333;
      }
      .pay{
        flex: 2;
        background-color: #ca351f;
      }
    }
    .go-back{
      position: fixed;
      left: 20px;
      top: 20px;
      width: 180px;
      height: 40px;
      padding: 10px;
      line-height: 40px;
      text-align: center;
      border-radius: 30px;
      color: #fff;
      background-color:rgba(0,0,0,.5);
    }
    // .mask-img{
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    //   min-height: 100%;
    //   background-image: url(../../assets/images/bg_meishi.jpg);
    //   filter: blur(34px);
    //   z-index: -2;
    // }
    // .mask{
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    //   background-color: rgba(151, 148, 148, 0.7);
    //   z-index: -1;
    //   min-height: 100%;
    // }
  }
</style>
